<template>
  <div class="brandpage_container">
    <!-- 头部内容 -->
    <div class="header">
      <!-- "返回"按钮 -->
      <router-link class="returned" to="/home"><i class="iconfont backarrow"></i></router-link>
      <!-- "天气"插件 -->
      <div class="weather_box">
        <div id="he-plugin-simple"></div>
      </div>
      <!-- "搜索"功能 -->
      <div class="searchFrom">
        <input type="text" name="" id="" value="点击搜索" />
        <button type="button"><i class="iconfont sousuo"></i></button>
      </div>
      <!-- "商场LOGO"内容 -->
      <router-link class="logo" to="/home"><i class="iconfont wandaicon"></i></router-link>
    </div>

    <!-- 主体内容 -->
    <div class="brandpage_content">
      <!-- "tab title"标题 -->
      <ul class="tab_title">
        <li @click="brand = 0" :class="{ active: brand == 0 }">
          <i class="iconfont pinpai"></i>品牌搜索
        </li>
        <li @click="brand = 1" :class="{ active: brand == 1 }">
          <i class="iconfont louceng"></i>楼层检索
        </li>
      </ul>

      <!-- "tab content"内容 -->
      <div class="tab_content">
        <!-- "品牌搜索"内容 -->
        <div v-show="brand == 0">
          <!-- "tab sub navigation"内容 -->
          <ul class="tab_subnav">
            <li @click="subnav = 0" :class="{ active: subnav == 0 }">全部业态</li>
            <li @click="subnav = 1" :class="{ active: subnav == 1 }">潮流服饰</li>
            <li @click="subnav = 2" :class="{ active: subnav == 2 }">黄金珠宝</li>
            <li @click="subnav = 3" :class="{ active: subnav == 3 }">配饰</li>
            <li @click="subnav = 4" :class="{ active: subnav == 4 }">时尚服饰</li>
            <li @click="subnav = 5" :class="{ active: subnav == 5 }">运动</li>
            <li @click="subnav = 6" :class="{ active: subnav == 6 }">美妆护肤</li>
            <li @click="subnav = 7" :class="{ active: subnav == 7 }">餐饮美食</li>
            <li @click="subnav = 8" :class="{ active: subnav == 8 }">数码</li>
            <li @click="subnav = 9" :class="{ active: subnav == 9 }">其他</li>
          </ul>

          <!-- "各大品牌"内容 -->
          <div class="subbrand_content">
            <!-- "L1"1楼品牌 -->
            <div class="tab_subbrand">
              <!-- <h1>L1</h1> -->
              <ul>
                <li v-for="item in storeList" :key="item.id" @click="showDetail(item)">
                  <el-button type="text" class="list_content"
                    ><img :src="item.thumb" alt="" srcset=""
                  /></el-button>
                  <div>
                    <p>{{ item.name }}</p>
                    <span><i class="iconfont daohang"></i>L{{ item.floor }}</span>
                  </div>
                </li>
              </ul>
              <!-- "产品"弹层内容 -->
              <el-dialog :visible.sync="centerDialogVisible">
                <el-button @click="centerDialogVisible = false"
                  ><i class="iconfont guanbi1"></i
                ></el-button>
                <p class="product_img">
                  <span><img :src="store.thumb" alt="" srcset="" /></span>
                  <img :src="store.detailImgs" alt="" srcset="" />
                </p>
                <dl class="prouct_introduce">
                  <dt>
                    {{ store.name
                    }}<span><i class="iconfont daohang"></i>地址{{ store.address }}</span>
                  </dt>
                  <dd>{{ store.description }}</dd>
                </dl>
              </el-dialog>
              <!-- "产品"弹层内容结束 -->
            </div>
            <!-- "L2"2楼品牌 -->
            <!-- <div class="tab_subbrand">
              <h1>L2</h1>
              <ul>
                <li>
                  <el-button type="text" class="list_content" @click="centerDialogVisible = true"
                    ><img src="../Brandpage/images/img1.jpg" alt="" srcset=""
                  /></el-button>
                  <div>
                    <p>麦当劳</p>
                    <span><i class="iconfont daohang"></i>L1</span>
                  </div>
                </li>
                <li>
                  <el-button type="text" class="list_content" @click="centerDialogVisible = true"
                    ><img src="../Brandpage/images/img2.jpg" alt="" srcset=""
                  /></el-button>
                  <div>
                    <p>麦当劳</p>
                    <span><i class="iconfont daohang"></i>L1</span>
                  </div>
                </li>
                <li>
                  <el-button type="text" class="list_content" @click="centerDialogVisible = true"
                    ><img src="../Brandpage/images/img3.jpg" alt="" srcset=""
                  /></el-button>
                  <div>
                    <p>麦当劳</p>
                    <span><i class="iconfont daohang"></i>L1</span>
                  </div>
                </li>
                <li>
                  <el-button type="text" class="list_content" @click="centerDialogVisible = true"
                    ><img src="../Brandpage/images/img4.jpg" alt="" srcset=""
                  /></el-button>
                  <div>
                    <p>麦当劳</p>
                    <span><i class="iconfont daohang"></i>L1</span>
                  </div>
                </li>
                <li>
                  <el-button type="text" class="list_content" @click="centerDialogVisible = true"
                    ><img src="../Brandpage/images/img5.jpg" alt="" srcset=""
                  /></el-button>
                  <div>
                    <p>麦当劳</p>
                    <span><i class="iconfont daohang"></i>L1</span>
                  </div>
                </li>
              </ul>
            </div> -->
          </div>
        </div>

        <!-- "楼层检索"内容 -->
        <!-- <div v-show="brand == 1">楼层检索</div> -->
      </div>
    </div>
  </div>
</template>

<script>
import { queryStoreList } from '@/api/store';
export default {
  name: 'index',
  data() {
    return {
      brand: '0',
      subnav: '0',
      centerDialogVisible: false,
      storeList: [],
      store: {},
      params: {
        type: 0,
        floor: 0,
      },
    };
  },
  watch: {
    subnav() {
      this.params.type = this.subnav;
      this.getStoreList();
    },
  },
  mounted() {
    this.getStoreList();
  },
  methods: {
    showDetail(item) {
      this.store = item;
      this.centerDialogVisible = true;
    },
    getStoreList() {
      queryStoreList(this.params).then((res) => {
        this.storeList = res.data;
      });
    },
  },
  created() {
    window.WIDGET = {
      CONFIG: {
        modules: '01234',
        background: '5',
        tmpColor: '404A56',
        tmpSize: '40',
        cityColor: '404A56',
        citySize: '0',
        aqiColor: '404A56',
        aqiSize: '40',
        weatherIconSize: '60',
        alertIconSize: '60',
        padding: '10px 10px 10px 10px',
        shadow: '0',
        language: 'auto',
        fixed: 'false',
        vertical: 'top',
        horizontal: 'left',
        key: 'c96c78edf3474b1585e0067b5b5b8626',
      },
    };
    var script = document.createElement('script');
    script.type = 'text/javascript';
    script.src = 'https://widget.qweather.net/simple/static/js/he-simple-common.js?v=2.0';
    document.getElementsByTagName('head')[0].appendChild(script);
  },
};
</script>

<style lang="less">
.brandpage_container {
  width: 1080px;
  height: 1920px;
  background-color: rgba(248, 248, 248, 0.5);

  .header {
    width: 100%;
    height: 220px;
    margin-bottom: 42px;
    box-sizing: border-box;
    position: relative;

    .weather_box {
      width: auto;
      height: 98px;
      font-weight: bold;
      position: absolute;
      top: 50px;
      left: 220px;
      display: flex;
      justify-content: left;
      align-items: center;
    }

    .returned {
      width: 366px;
      height: 366px;
      color: #fff;
      border-radius: 180px;
      overflow: hidden;
      position: absolute;
      top: 0;
      left: 0;
      transition: 0.5s;
      transform: translate(-40%, -40%);
      background-color: #9942ff;
      background-image: -o-linear-gradient(-45deg, #9942ff, #f68eff);
      background-image: -moz-linear-gradient(-45deg, #9942ff, #f68eff);
      background-image: -webkit-linear-gradient(-45deg, #9942ff, #f68eff);
      background-image: linear-gradient(-45deg, #9942ff, #f68eff);

      &:hover,
      &:active {
        transition: 0.5s;
        transform: translate(-35%, -35%);
        background-image: -o-linear-gradient(-45deg, #8628fd, #ff64ef);
        background-image: -moz-linear-gradient(-45deg, #8628fd, #ff64ef);
        background-image: -webkit-linear-gradient(-45deg, #8628fd, #ff64ef);
        background-image: linear-gradient(-45deg, #8628fd, #ff64ef);
        & > .iconfont {
          transition: 0.5s;
          font-size: 5.5rem;
        }
      }

      & > .iconfont {
        transition: 0.5s;
        font-size: 5rem;
        position: absolute;
        left: 52%;
        top: 55%;
      }
    }
    .logo {
      width: 108px;
      height: 108px;
      display: flex;
      justify-content: center;
      align-items: center;
      color: #e30016;
      float: right;
      margin: 42px 60px 0 0;
      & > .iconfont {
        font-size: 6rem;
      }
    }
    .searchFrom {
      display: none;
      width: 378px;
      height: 74px;
      border-radius: 37px;
      overflow: hidden;
      position: absolute;
      top: 26%;
      left: 46%;
      background-color: #fff;
      box-shadow: 0 0 20px rgba(109, 93, 253, 0.2);

      &:hover,
      &:active,
      &:focus {
        box-shadow: 0 0 20px rgba(80, 61, 255, 0.5);
      }
      input {
        width: 378px;
        height: 74px;
        display: flex;
        justify-content: left;
        align-items: center;
        padding: 0 70px 0 30px;
        box-sizing: border-box;
        font-size: 1.8rem;
        color: #6d7784;
      }
      button {
        width: 42px;
        height: 42px;
        border: 0;
        background-color: transparent;
        background-image: none;
        display: flex;
        justify-content: center;
        align-items: center;
        position: absolute;
        right: 26px;
        top: 16px;
        color: #9eb3cd;
        cursor: pointer;
        &:hover,
        &active {
          color: #4757fd;
        }
        & > .iconfont {
          font-size: 2.6rem;
        }
      }
    }
  }

  .brandpage_content {
    width: 100%;
    padding: 30px 60px;
    position: relative;

    .tab_title,
    .tab_content {
      width: 100%;
    }

    .tab_title {
      height: 116px;
      display: flex;
      justify-content: flex-end;
      align-content: flex-start;
      border-radius: 60px;
      background-color: #fff;
      box-shadow: 0 0 20px rgba(149, 57, 252, 0.2);

      & > li {
        width: 50%;
        height: 116px;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 2.8rem;
        color: #404a56;
        font-weight: bold;
        cursor: pointer;

        & > .iconfont {
          font-size: 3rem;
          color: transparent;
          opacity: 0;
        }
      }

      .active {
        color: #fff;
        font-weight: bold;
        border-radius: 60px;
        -webkit-transition: 0.5s;
        transition: 0.5s;
        background-color: #9438ff;
        background-image: linear-gradient(to left, #9438ff, #cc7ef9);
        background-image: -o-linear-gradient(to left, #9438ff, #cc7ef9);
        background-image: -moz-linear-gradient(to left, #9438ff, #cc7ef9);
        background-image: -webkit-linear-gradient(to left, #9438ff, #cc7ef9);

        & > .iconfont {
          color: #fff;
          opacity: 1;
          transition: 0.5s;
          font-weight: normal;
          padding-right: 15px;
        }
      }
    }

    .tab_content {
      width: 100%;
      height: auto;
      max-height: 1480px;
      padding: 30px 0 0 16px;
      overflow-x: hidden;
      overflow-y: auto;
      //高宽分别对应横竖滚动条的尺寸
      &::-webkit-scrollbar {
        width: 0px;
        height: 0;
      }
      //内阴影 和 圆角
      &::-webkit-scrollbar-track {
        box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
        border-radius: 10px;
      }
      // 内阴影 圆角
      &::-webkit-scrollbar-thumb {
        border-radius: 10px;
        box-shadow: inset 0 0 6px rgba(93, 101, 131, 0.1);
        background-color: #ebebeb;
      }
      .tab_subnav {
        width: 100%;
        padding-bottom: 20px;
        box-sizing: border-box;
        display: flex;
        justify-content: flex-start;
        align-items: flex-start;
        flex-wrap: wrap;

        & > li {
          width: auto;
          height: 84px;
          max-width: 30%;
          line-height: 84px;
          font-size: 2rem;
          color: #404a56;
          text-align: center;
          overflow: hidden;
          padding: 0 40px;
          margin: 0 14px 24px 10px;
          border-radius: 42px;
          background-color: #fff;
          box-shadow: 0 0 20px rgba(141, 28, 252, 0.2);
          cursor: pointer;
        }

        .active {
          color: #fff;
          transition: 0.5s;
          border-radius: 42px;
          background-image: linear-gradient(to left, #9133ff, #d06cff);
          background-image: -o-linear-gradient(to left, #9133ff, #d06cff);
          background-image: -moz-linear-gradient(to left, #9133ff, #d06cff);
          background-image: -webkit-linear-gradient(to left, #9133ff, #d06cff);
          box-shadow: 0 0 30px rgba(141, 28, 252, 0.5);
        }
      }

      .subbrand_content {
        width: 100%;
        height: auto;
        overflow-x: hidden;
        overflow-y: auto;
        max-height: 1230px;
        //高宽分别对应横竖滚动条的尺寸
        &::-webkit-scrollbar {
          width: 10px;
          height: 0;
        }
        //内阴影 和 圆角
        &::-webkit-scrollbar-track {
          box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
          border-radius: 10px;
        }
        // 内阴影 圆角
        &::-webkit-scrollbar-thumb {
          border-radius: 10px;
          box-shadow: inset 0 0 6px rgba(93, 101, 131, 0.1);
          background-color: #ebebeb;
        }
      }

      .tab_subbrand {
        width: 100%;
        margin: 15px 0;
        h1 {
          width: 100%;
          display: flex;
          justify-content: flex-start;
          align-content: center;
          font-size: 6.2rem;
          font-weight: bold;
          color: #d1d5de;
          margin-bottom: 20px;
        }
        ul {
          width: 100%;
          padding-bottom: 10px;
          display: flex;
          justify-content: flex-start;
          align-items: flex-start;
          flex-flow: wrap;
          li {
            width: 200px;
            height: auto;
            margin: 0 16px 30px 16px;
            .list_content {
              width: 200px;
              height: 200px;
              border: 2px solid #fff;
              display: inline-block;
              border-radius: 30px;
              padding: 20px;
              box-sizing: border-box;
              overflow: hidden;
              background-color: #fff;
              box-shadow: 0 0 20px rgba(109, 93, 253, 0.2);

              img {
                width: 100%;
                height: auto;
                border-radius: 20px;
              }

              &:hover,
              &:active,
              &:focus {
                border: 2px solid #c66cff;
                transition: 0.5s;
                box-shadow: 0 0 20px rgba(109, 93, 253, 0.5);
              }
            }

            & > div {
              width: 100%;
              color: #404a56;
              position: relative;
              & > p {
                width: 140px;
                height: 38px;
                line-height: 38px;
                font-size: 1rem;
                overflow: hidden;
                float: left;
              }
              & > span {
                width: 60px;
                height: 38px;
                line-height: 38px;
                font-size: 1.1rem;
                display: flex;
                justify-content: flex-end;
                align-items: center;
                .iconfont {
                  font-size: 1.36rem;
                  color: transparent;
                  background-image: linear-gradient(to top, #c66cff, #f9be78);
                  background-image: -o-linear-gradient(to top, #c66cff, #f9be78);
                  background-image: -moz-linear-gradient(to top, #c66cff, #f9be78);
                  background-image: -webkit-linear-gradient(to top, #c66cff, #f9be78);
                  -webkit-background-clip: text;
                  -moz-background-clip: text;
                  background-clip: text;
                  -webkit-text-fill-color: transparent;
                  padding-right: 5px;
                }
              }
            }
          }
        }
        & > .el-dialog__wrapper {
          .el-dialog {
            width: 890px;
            height: 1140px;
            max-height: 1140px;
            background-color: #fff;
            border-radius: 30px;
            box-shadow: 0 0 30px rgba(111, 69, 254, 0.8);
            position: relative;
            margin: 0 auto 50px;
            box-sizing: border-box;
            .el-dialog__header {
              padding: 0;
              button {
                display: none;
              }
            }

            .el-dialog__body {
              width: auto;
              position: relative;
              color: #727a95;
              font-size: 1.2rem;
              padding: 50px;
              .el-button {
                width: 220px;
                height: 220px;
                display: flex;
                justify-content: center;
                align-items: center;
                border-radius: 110px;
                cursor: pointer;
                color: #fff;
                -webkit-appearance: none;
                box-sizing: border-box;
                border: 0 !important;
                outline: 0;
                transition: 0.3s;
                background: #7500ff;
                background-image: -o-radial-gradient(#7500ff, #cc73ff);
                background-image: -moz-radial-gradient(#7500ff, #cc73ff);
                background-image: -webkit-radial-gradient(#7500ff, #cc73ff);
                background-image: radial-gradient(#7500ff, #cc73ff);
                position: absolute;
                top: 0;
                right: 0;
                transform: translate(40%, -40%);
                box-shadow: 0 0 30px rgba(0, 0, 0, 0.5);
                & span > .iconfont {
                  font-size: 5rem !important;
                }
              }
              .product_img {
                width: 100%;
                height: 520px;
                display: flex;
                justify-content: center;
                align-items: flex-start;
                border-radius: 30px;
                overflow: hidden;
                & > img {
                  width: 100%;
                  height: auto;
                }
                & > span {
                  width: 210px;
                  height: 210px;
                  display: flex;
                  justify-content: center;
                  align-items: center;
                  background-color: #fff;
                  padding: 20px;
                  border-radius: 105px;
                  overflow: hidden;
                  position: absolute;
                  top: 400px;
                  left: 10px;
                  z-index: 100;
                  & > img {
                    width: 100%;
                    height: auto;
                    border-radius: 105px;
                  }
                }
              }
              .prouct_introduce {
                width: 100%;
                padding: 30px 0 20px 0;
                & > dt {
                  width: 100%;
                  height: 86px;
                  line-height: 86px;
                  font-size: 2rem;
                  font-weight: bold;
                  color: #171044;
                  text-align: left;
                  overflow: hidden;
                  & > span {
                    font-size: 1.4rem;
                    color: #404a56;
                    & > .iconfont {
                      font-size: 1.7rem;
                      color: transparent;
                      padding: 0 5px 0 20px;
                      background-image: linear-gradient(to top, #c66cff, #f9be78);
                      background-image: -o-linear-gradient(to top, #c66cff, #f9be78);
                      background-image: -moz-linear-gradient(to top, #c66cff, #f9be78);
                      background-image: -webkit-linear-gradient(to top, #c66cff, #f9be78);
                      -webkit-background-clip: text;
                      -moz-background-clip: text;
                      background-clip: text;
                      -webkit-text-fill-color: transparent;
                    }
                  }
                }
                & > dd {
                  width: 100%;
                  height: auto;
                  max-height: 420px;
                  line-height: 42px;
                  font-size: 1.5rem;
                  font-weight: normal;
                  overflow-x: hidden;
                  overflow-y: auto;
                  text-align: justify;
                  letter-spacing: 1px;
                  box-sizing: border-box;
                  padding-right: 10px;
                  //高宽分别对应横竖滚动条的尺寸
                  &::-webkit-scrollbar {
                    width: 10px;
                    height: 0;
                  }
                  //内阴影 和 圆角
                  &::-webkit-scrollbar-track {
                    box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
                    border-radius: 10px;
                  }
                  // 内阴影 圆角
                  &::-webkit-scrollbar-thumb {
                    border-radius: 10px;
                    box-shadow: inset 0 0 6px rgba(93, 101, 131, 0.1);
                    background-color: #ebebeb;
                  }
                }
              }
            }
          }
        }
      }
    }
  }

  .map_content {
    width: 100%;
    height: auto;
    position: relative;
    margin-top: 60px;
    display: flex;
    justify-content: flex-end;
    align-items: flex-start;
    .tab_title {
      width: 80px;
      position: absolute;
      left: 0%;
      top: 0%;
      & > li {
        width: 80px;
        height: 80px;
        font-size: 2.2rem;
        color: #404a56;
        font-weight: normal;
        float: left;
        line-height: 80px;
        text-align: center;
        overflow: hidden;
        background-color: #fff;
        border-radius: 10px;
        margin-bottom: 30px;
        box-shadow: 0 0 20px rgba(111, 69, 254, 0.2);
        cursor: pointer;
      }
      /* 点击对应的标题添加对应的背景颜色 */
      .active {
        color: #fff;
        font-weight: bold;
        background-color: #7134fe;
        background-image: linear-gradient(to top, #7134fe, #66a5fc);
        background-image: -o-linear-gradient(to top, #7134fe, #66a5fc);
        background-image: -moz-linear-gradient(to top, #7134fe, #66a5fc);
        background-image: -webkit-linear-gradient(to top, #7134fe, #66a5fc);
        box-shadow: 0 0 20px rgba(111, 69, 254, 0.4);
      }
    }
    .tab_container {
      width: 850px;
      float: right;
      position: relative;
      .tab_content {
        width: 100%;
        p {
          width: 100%;
          height: 730px;
          display: flex;
          justify-content: center;
          align-items: center;
        }
        .btns_box {
          width: 80px;
          line-height: 32px;
          background-color: #fff;
          border-radius: 10px;
          padding: 10px 0;
          overflow: hidden;
          position: absolute;
          top: 0;
          right: 0;
          box-shadow: 0 0 20px rgba(111, 69, 254, 0.2);
          .btn_content {
            width: 100%;
            text-align: center;
            margin: 10px 0;
            display: inline-block;
            font-size: 1rem;
            color: #727a95;

            & > .iconfont {
              font-size: 2.2rem;
              background-image: -o-linear-gradient(to top, #5000ff, #4196fd);
              background-image: -moz-linear-gradient(to top, #5000ff, #4196fd);
              background-image: -webkit-linear-gradient(to top, #5000ff, #4196fd);
              background-image: linear-gradient(to top, #5000ff, #4196fd);
              -webkit-background-clip: text;
              background-clip: text;
              -webkit-text-fill-color: transparent;
              color: transparent;
            }
          }
        }
        .life_navigation {
          width: 100%;
          display: flex;
          justify-content: center;
          align-items: flex-start;
          margin-top: 60px;
          & > li {
            width: auto;
            margin: 0 10px;
            text-align: center;
            a {
              font-size: 1.2rem;
              color: #727a95;
              text-decoration: none;

              &:hover,
              &active,
              &:focus {
                color: #0e0641;
              }

              & > .iconfont {
                font-size: 3.4rem;
                display: flex;
                justify-content: center;
                align-content: center;
                padding-bottom: 10px;
                box-sizing: border-box;
                -webkit-background-clip: text;
                background-clip: text;
                -webkit-text-fill-color: transparent;
                color: transparent;
                font-weight: normal;
              }

              & > .nav1 {
                background-image: -o-linear-gradient(to top, #5000ff, #4196fd);
                background-image: -moz-linear-gradient(to top, #5000ff, #4196fd);
                background-image: -webkit-linear-gradient(to top, #5000ff, #4196fd);
                background-image: linear-gradient(to top, #5000ff, #4196fd);

                &:hover,
                &active,
                &:focus {
                  background-image: -o-linear-gradient(to bottom, #5000ff, #4196fd);
                  background-image: -moz-linear-gradient(to bottom, #5000ff, #4196fd);
                  background-image: -webkit-linear-gradient(to bottom, #5000ff, #4196fd);
                  background-image: linear-gradient(to bottom, #5000ff, #4196fd);
                }
              }

              & > .nav2 {
                background-image: -o-linear-gradient(to top, #3968e2, #55e3b6);
                background-image: -moz-linear-gradient(to top, #3968e2, #55e3b6);
                background-image: -webkit-linear-gradient(to top, #3968e2, #55e3b6);
                background-image: linear-gradient(to top, #3968e2, #55e3b6);

                &:hover,
                &active,
                &:focus {
                  background-image: -o-linear-gradient(to bottom, #3968e2, #55e3b6);
                  background-image: -moz-linear-gradient(to bottom, #3968e2, #55e3b6);
                  background-image: -webkit-linear-gradient(to bottom, #3968e2, #55e3b6);
                  background-image: linear-gradient(to bottom, #3968e2, #55e3b6);
                }
              }

              & > .nav3 {
                background-image: -o-linear-gradient(to top, #fb4659, #ebcc57);
                background-image: -moz-linear-gradient(to top, #fb4659, #ebcc57);
                background-image: -webkit-linear-gradient(to top, #fb4659, #ebcc57);
                background-image: linear-gradient(to top, #fb4659, #ebcc57);

                &:hover,
                &active,
                &:focus {
                  background-image: -o-linear-gradient(to bottom, #fb4659, #ebcc57);
                  background-image: -moz-linear-gradient(to bottom, #fb4659, #ebcc57);
                  background-image: -webkit-linear-gradient(to bottom, #fb4659, #ebcc57);
                  background-image: linear-gradient(to bottom, #fb4659, #ebcc57);
                }
              }

              & > .nav4 {
                background-image: -o-linear-gradient(to top, #7500ff, #ba50f7);
                background-image: -moz-linear-gradient(to top, #7500ff, #ba50f7);
                background-image: -webkit-linear-gradient(to top, #7500ff, #ba50f7);
                background-image: linear-gradient(to top, #7500ff, #ba50f7);

                &:hover,
                &active,
                &:focus {
                  background-image: -o-linear-gradient(to bottom, #7500ff, #ba50f7);
                  background-image: -moz-linear-gradient(to bottom, #7500ff, #ba50f7);
                  background-image: -webkit-linear-gradient(to bottom, #7500ff, #ba50f7);
                  background-image: linear-gradient(to bottom, #7500ff, #ba50f7);
                }
              }

              & > .nav5 {
                background-image: -o-linear-gradient(to top, #9a3ad8, #ffcb48);
                background-image: -moz-linear-gradient(to top, #9a3ad8, #ffcb48);
                background-image: -webkit-linear-gradient(to top, #9a3ad8, #ffcb48);
                background-image: linear-gradient(to top, #9a3ad8, #ffcb48);

                &:hover,
                &active,
                &:focus {
                  background-image: -o-linear-gradient(to bottom, #9a3ad8, #ffcb48);
                  background-image: -moz-linear-gradient(to bottom, #9a3ad8, #ffcb48);
                  background-image: -webkit-linear-gradient(to bottom, #9a3ad8, #ffcb48);
                  background-image: linear-gradient(to bottom, #9a3ad8, #ffcb48);
                }
              }

              & > .nav6 {
                background-image: -o-linear-gradient(to top, #d9567a, #dc83e5);
                background-image: -moz-linear-gradient(to top, #d9567a, #dc83e5);
                background-image: -webkit-linear-gradient(to top, #d9567a, #dc83e5);
                background-image: linear-gradient(to top, #d9567a, #dc83e5);

                &:hover,
                &active,
                &:focus {
                  background-image: -o-linear-gradient(to bottom, #d9567a, #dc83e5);
                  background-image: -moz-linear-gradient(to bottom, #d9567a, #dc83e5);
                  background-image: -webkit-linear-gradient(to bottom, #d9567a, #dc83e5);
                  background-image: linear-gradient(to bottom, #d9567a, #dc83e5);
                }
              }
            }
          }
        }
      }
    }
  }
}
</style>
